<template>
    <MyLoading v-show="loadingTag"></MyLoading>
    <div class="films" ref="filmsBox">
        <div class="item" v-for="(item, index) in list" :key="'f' + index" @click="gotoDetial(item.filmId)">
            <div class="left"><img :src="item.poster" /></div>
            <div class="middle">
                <div>{{ item.name }}</div>
                <div v-if="type">
                    <span> 观众评分</span>
                    <span>{{ item.grade }}</span>
                </div>
                <div>主演：{{ parseActors(item.actors) }}</div>
                <div>{{ item.nation }} | {{ item.runtime }} 分钟</div>
            </div>
            <div class="right" v-if="!!type">
                <span>购票</span>
            </div>
            <div class="right" v-else>
                <span>预购</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, defineEmits } from 'vue'
import MyLoading from './MyLoading.vue'
import { ActorType, ListType } from '../types'
import { useRouter } from 'vue-router';

const loadingTag = ref<boolean>(true)
const filmsBox = ref<HTMLElement | null>(null);

const emit = defineEmits(["getMoreData"])

// 接收父组件传递过来的 list 数据
// 目前我们使用 了 TS 来进行开发，TS 最大的功能是 规范开发的数据类型
// 在 Vue3 + TS 中，props 可以不用接收参数，直接使用
interface PropsType {
    list: ListType[];
    type: number;
}
const props = defineProps<PropsType>()
// 如果我们去监听一个响应式数据对象 
watch(() => props.list, () => {
    console.log(props.list);
    if (props.list.length > 0) loadingTag.value = false;
})

const parseActors = (value: ActorType[]) => {
    let actors = "";
    value.forEach((element: { name: string; }) => {
        actors += element.name + " ";
    });
    return actors;
}

const router = useRouter();
// 跳转到 详情页面
const gotoDetial = (id: number) => {
    router.push("/detial/" + id);
}

const debounce = (func: any, delay: any) => {
    let timer: any = null;
    return function () {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
        timer = setTimeout(() => {
            func(...arguments);
        }, delay);
    };
}

onMounted(() => {
    window.onscroll = debounce(() => {
        if (filmsBox.value && window.pageYOffset + 50 + window.innerHeight > filmsBox.value.scrollHeight) {
            console.log("滚动到底了，需要请求新的数据了！");
            emit("getMoreData")
        }
    }, 300)
})

</script>

<style scoped lang="scss">
.films {
    padding-bottom: 60px;

    .item {
        margin-top: 15px;
        padding-bottom: 10px;
        padding-top: 10px;
        display: flex;
        color: #797d82;
        font-size: 13px;
        border-bottom: 1px solid #e7d8d8;
        background-color: #fff;

        .left {
            width: 77px;
            height: 100px;
            margin-left: 20px;

            img {
                width: 66px;
                height: 100%;
            }
        }

        .middle {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 55%;

            div:nth-of-type(1) {
                color: #191a1b;
                font-size: 16px;
            }

            div:nth-of-type(3) {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .right {
            width: 15%;
            display: flex;
            align-items: center;
            margin-right: 20px;

            span {
                border: 1px solid #ff5f16;
                background: white;
                color: #ff5f16;
                border-radius: 2px;
                height: 25px;
                line-height: 25px;
                font-size: 13px;
                width: 50px;
                text-align: center;
            }
        }
    }
}
</style>